<template>
  <div>
    <el-table :data="loanData" style="width: 100%" @row-dblclick="showDetail">
      <el-table-column prop="productName" label="产品名称"></el-table-column>
      <el-table-column prop="loanCode" label="贷款产品代码"></el-table-column>
      <el-table-column prop="dueBillNo" label="借据号"></el-table-column>
      <el-table-column prop="contrNbr" label="合同号"></el-table-column>
      <el-table-column prop="idNo" label="证件号码"></el-table-column>
      <el-table-column prop="name" label="客户姓名"></el-table-column>
      <el-table-column prop="applyDate" label="申请日期"></el-table-column>
      <el-table-column prop="fundStatus" label="放款状态"></el-table-column>
    </el-table>

    <!-- 借据详情 -->
    <div class="loanDataDialog">
      <el-dialog
        title="借据详情页面"
        :visible.sync="showDialog"
        width="80%"
        :before-close="handleClose"
      >
        <el-menu
          :default-active="defaultActive"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">客户信息</el-menu-item>
          <el-menu-item index="2">贷款信息</el-menu-item>
          <el-menu-item index="3">还款计划</el-menu-item>
          <el-menu-item index="4">还款记录</el-menu-item>
        </el-menu>

        <!-- 客户信息表格列 -->
        <div v-if="defaultActive === '1'">
          <el-form :model="customerInfo" style="padding-left: 100px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="客户编号：">
                  <span>{{ customerInfo.khbh }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证件类型：">
                  <span>{{ customerInfo.idType }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证件号码：">
                  <span>{{ customerInfo.idNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="移动电话：">
                  <span>{{ customerInfo.mobile }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="约定还款银行卡号：">
                  <span>{{ customerInfo.bankCardNbr }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="姓名：">
                  <span>{{ customerInfo.name }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="姓别：">
                  <span>{{ customerInfo.gender }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="婚姻状况">
                  <span>{{ customerInfo.maritalStatus }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="教育状况：">
                  <span>{{ customerInfo.educationType }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职业">
                  <span>{{ customerInfo.occupation }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职位：">
                  <span>{{ customerInfo.zw }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职级：">
                  <span>{{ customerInfo.zj }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="工作单位：">
                  <span>{{ customerInfo.gzdw }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="户籍所在省：">
                  <span>{{ customerInfo.hjszs }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="户籍城市：">
                  <span>{{ customerInfo.hjcs }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请省份：">
                  <span>{{ customerInfo.sqsf }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请城市：">
                  <span>{{ customerInfo.sqcs }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建日期：">
                  <span>{{ customerInfo.createTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请单编号：">
                  <span>{{ customerInfo.associatedAppNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="贷款产品组：">
                  <span>{{ customerInfo.loanProdGroup }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <!-- 贷款信息表格列 -->
        <div v-if="defaultActive === '2'">
          <el-form :model="loanInfo" style="padding-left: 100px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="客户姓名">
                  <span>{{ loanInfo.name }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="身份证号">
                  <span>{{ loanInfo.idNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品名称">
                  <span>{{ loanInfo.prodName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="借据号">
                  <span>{{ loanInfo.dueBillNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="合同编号">
                  <span>{{ loanInfo.contraNbr }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="贷款产品代码">
                  <span>{{ loanInfo.loanCode }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="申请日期">
                  <span>{{ loanInfo.applyDate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="到期日期">
                  <span>{{ loanInfo.endDate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="确认日期">
                  <span>{{ loanInfo.startDate }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="放款状态">
                  <span>{{ loanInfo.fundStatus }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="结清日期">
                  <span>{{ loanInfo.clearDate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="借款金额">
                  <span>{{ loanInfo.loanAmt }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="币种">
                  <span>{{ loanInfo.currency }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="还款方式">
                  <span>{{ loanInfo.payMode }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="还款周期">
                  <span>{{ loanInfo.repayCycle }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="总期数">
                  <span>{{ loanInfo.totalTerms }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="当期期数">
                  <span>{{ loanInfo.curTerm }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="未到期期数">
                  <span>{{ loanInfo.undueTerm }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="还款日">
                  <span>{{ loanInfo.stmtDay }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="宽限期">
                  <span>{{ loanInfo.graceDaysInterval }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="转移前贷款形态">
                  <span>{{ loanInfo.preLoanForm }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="贷款形态">
                  <span>{{ loanInfo.loanForm }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="当期形态转移日期">
                  <span>{{ loanInfo.formChgDate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="终止日期">
                  <span>{{ loanInfo.terminalDate }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="逾期起始日期">
                  <span>{{ loanInfo.overdueBeginDate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="逾期天数">
                  <span>{{ loanInfo.dpd }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="当前逾期期数">
                  <span>{{ loanInfo.currOverdueTermCnt }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="累计逾期期数">
                  <span>{{ loanInfo.hstOverdueTermCnt }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="应还本金">
                  <span>{{ loanInfo.prinTotal }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="正常本金余额">
                  <span>{{ loanInfo.prinBal }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="逾期本金余额">
                  <span>{{ loanInfo.ovdPrinBal }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="应还利息">
                  <span>{{ loanInfo.intTotal }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="已还利息">
                  <span>{{ loanInfo.intRepay }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="已还本金">
                  <span>{{ loanInfo.prinRepay }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="正常本金余额">
                  <span>{{ loanInfo.prinBal }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="逾期本金余额">
                  <span>{{ loanInfo.ovdPrinBal }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="应还利息">
                  <span>{{ loanInfo.intTotal }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="已还利息">
                  <span>{{ loanInfo.intRepay }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="应收应计利息余额">
                  <span>{{ loanInfo.intBal }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="应收欠息余额">
                  <span>{{ loanInfo.ovdIntBal }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="应还罚息">
                  <span>{{ loanInfo.pnltIntTotal }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="已结出利息">
                  <span>{{ loanInfo.postedInt }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="未到期本金应计利息">
                  <span>{{ loanInfo.unduePrinAccruedInt }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="已还罚息">
                  <span>{{ loanInfo.pnltIntRepay }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="应收应计罚息余额">
                  <span>{{ loanInfo.pnltIntBal }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="累计代偿金额">
                  <span>{{ loanInfo.compensateAmtSum }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="累计代偿次数">
                  <span>{{ loanInfo.compensateCount }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="上次代偿成功日期">
                  <span>{{ loanInfo.lastCompstDate }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="上次代偿成功金额">
                  <span>{{ loanInfo.lastCompstAmt }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="账务日期">
                  <span>{{ loanInfo.curDa }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <!-- 还款计划表格列 -->
        <div v-if="defaultActive === '3'">
          <!-- <el-form :model="repaymentPlan" style="padding-left: 100px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="期数">
                  <span>{{ repaymentPlan.termNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开始日期">
                  <span>{{ repaymentPlan.startDate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="到期日期">
                  <span>{{ repaymentPlan.endDate }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="结清日期">
                  <span>{{ repaymentPlan.clearDate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="宽限日">
                  <span>{{ repaymentPlan.graceDate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="应还本金">
                  <span>{{ repaymentPlan.prinTotal }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="已还本金">
                  <span>{{ repaymentPlan.prinRepay }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="本金余额">
                  <span>{{ repaymentPlan.prinBal }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="应还利息">
                  <span>{{ repaymentPlan.intTotal }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="已还利息">
                  <span>{{ repaymentPlan.intRepay }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="已结利息">
                  <span>{{ repaymentPlan.postedInterest }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="利息余额">
                  <span>{{ repaymentPlan.intBal }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="减免利息">
                  <span>{{ repaymentPlan.intReducedAmt }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="应还罚息">
                  <span>{{ repaymentPlan.pnltIntTotal }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="已还罚息">
                  <span>{{ repaymentPlan.pnltIntRepay }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="罚息余额">
                  <span>{{ repaymentPlan.pnltIntBal }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="已结罚息">
                  <span>{{ repaymentPlan.postedPenalty }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="减免罚息">
                  <span>{{ repaymentPlan.pnltReducedAmt }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="合计应还">
                  <span>{{ repaymentPlan.sum }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="当期余额">
                  <span>{{ repaymentPlan.currTermBalAmt }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="结清日期">
                  <span>{{ repaymentPlan.clearDate }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form> -->
          <el-table :data="repaymentPlan.planInfoList" style="width: 100%">
            <el-table-column prop="termNo" label="期数"></el-table-column>

            <el-table-column
              prop="startDate"
              label="开始日期"
            ></el-table-column>

            <el-table-column
              prop="endDate"
              label="到期日期"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="clearDate"
              label="结清日期"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="graceDate"
              label="宽限日"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="prinTotal"
              label="应还本金"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="prinRepay"
              label="已还本金"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="prinBal"
              label="本金余额"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="intTotal"
              label="应还利息"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="intRepay"
              label="已还利息"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="postedInterest"
              label="已结利息"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="intBal"
              label="利息余额"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="intReducedAmt"
              label="减免利息"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="pnltIntTotal"
              label="应还罚息"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="pnltIntRepay"
              label="已还罚息"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="pnltIntBal"
              label="罚息余额"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="postedPenalty"
              label="已结罚息"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="pnltReducedAmt"
              label="减免罚息"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="sum"
              label="合计应还"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="currTermBalAmt"
              label="当期余额"
              width="150"
            ></el-table-column>
          </el-table>
        </div>

        <!-- 还款记录表格列 -->
        <div v-if="defaultActive === '4'">
          <!-- <el-form :model="repaymentRecord" style="padding-left: 100px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="账务日期">
                  <span>{{ repaymentRecord.curDate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="交易日期">
                  <span>{{ repaymentRecord.transDate }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="交易时间">
                  <span>{{ repaymentRecord.transTime }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="交易流水号">
                  <span>{{ repaymentRecord.seqNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="还款期数">
                  <span>{{ repaymentRecord.repayTerm }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="还款余额成分">
                  <span>{{ repaymentRecord.repayBucketType }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="还款类型">
                  <span>{{ repaymentRecord.repayType }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="还款金额">
                  <span>{{ repaymentRecord.repayBucketAmt }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="本期交易金额">
                  <span>{{ repaymentRecord.termTxnAmt }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="本期实收金额">
                  <span>{{ repaymentRecord.termSuccAmt }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="还款来源">
                  <span>{{ repaymentRecord.repaySource }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="还款方式">
                  <span>{{ repaymentRecord.payMode }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="还款后状态">
                  <span>{{ repaymentRecord.afterRepayStatus }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="批量日期">
                  <span>{{ repaymentRecord.batchDate }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form> -->
          <el-table :data="repaymentPlan.repayDetailList" style="width: 100%">
            <el-table-column
              prop="transDate"
              label="交易日期"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="transTime"
              label="交易时间"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="seqNo"
              label="流水号"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="repayTerm"
              label="还款期数"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="repayBucketType"
              label="还款类型"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="repayType"
              label="还款方式"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="repayBucketAmt"
              label="还款金额"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="termTxnAmt"
              label="应还金额"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="termSuccAmt"
              label="实还金额"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="payMode"
              label="支付方式"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="afterRepayStatus"
              label="还款状态"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="batchDate"
              label="批次日期"
              width="120"
            ></el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { tnqContractDetailList } from "@/api/interface";

export default {
  data() {
    return {
      showTable: false,
      loanData: [],
      customerInfo: {},
      loanInfo: {},
      repaymentPlan: {},
      repaymentRecord: {},
      defaultActive: "1",
      showDialog: false,
      allData: "",
    };
  },

  created() {
    //     setTimeout(() => {
    //   console.log("回到首页");
    //   this.$router.push({ name: "personal" }); //回到首页
    // }, 5000);
    //初始化借据信息
    this.showLoanData();


  },
  watch: {
    $route(to, from) {
      // 路由变化时执行的操作
      console.log("Route changed from", from.path, "to", to.path);
      // this.showLoanData();
      this.$destroy();
    },
  },
  methods: {
    showLoanData() {
      //拿初始化客户信息
      this.allData = JSON.parse(sessionStorage.getItem("personalInfoData"));
      
      console.log("借据初始化信息==", this.allData);
      // 获取借据信息
      // this.allData = [
      //   {
      //     appNo: "GD202408141400020786",
      //     channel: "THX001",
      //     isProprietary: "0",
      //     subTerminalType: "",
      //     contrNbr: "HT2024081400011931",
      //     approveType: "V",
      //     isSingleApprove: "0",
      //     isCallStatus: "1",
      //     repayMethod: "MCEI",
      //     risCode: "A",
      //     cstLmtPeriod: "2199-12-31",
      //     productName: "特欢喜",
      //     associatedAppNo: "GD202407311300020684",
      //     createTime: "2024-08-14",
      //     planInfoList: [
      //       {
      //         termNo: 1,
      //         endDate: "2038-02-09",
      //         clearDate: "2038-02-27",
      //         graceDate: "2038-02-12",
      //         prinTotal: 3315.05,
      //         prinRepay: 3315.05,
      //         prinBal: 0.0,
      //         intTotal: 51.67,
      //         intRepay: 51.67,
      //         intBal: 0.0,
      //         intReducedAmt: 0,
      //         pnltIntTotal: 2.49,
      //         pnltIntRepay: 2.49,
      //         pnltIntBal: 0.0,
      //         pnltReducedAmt: 0,
      //         sum: 3369.21,
      //         currTermBalAmt: 0,
      //       },
      //       {
      //         termNo: 2,
      //         endDate: "2038-03-09",
      //         clearDate: "2038-04-02",
      //         graceDate: "2038-03-12",
      //         prinTotal: 3335.52,
      //         prinRepay: 3335.52,
      //         prinBal: 0.0,
      //         intTotal: 31.2,
      //         intRepay: 31.2,
      //         intBal: 0.0,
      //         intReducedAmt: 0,
      //         pnltIntTotal: 0.83,
      //         pnltIntRepay: 0.83,
      //         pnltIntBal: 0.0,
      //         pnltReducedAmt: 0,
      //         sum: 3367.55,
      //         currTermBalAmt: 0,
      //       },
      //       {
      //         termNo: 3,
      //         endDate: "2038-04-09",
      //         clearDate: "2038-04-16",
      //         graceDate: "2038-04-12",
      //         prinTotal: 3349.43,
      //         prinRepay: 3349.43,
      //         prinBal: 0.0,
      //         intTotal: 17.31,
      //         intRepay: 17.31,
      //         intBal: 0.0,
      //         intReducedAmt: 0,
      //         pnltIntTotal: 0.84,
      //         pnltIntRepay: 0.84,
      //         pnltIntBal: 0.0,
      //         pnltReducedAmt: 0,
      //         sum: 3367.58,
      //         currTermBalAmt: 0,
      //       },
      //     ],
      //     repayDetailList: [
      //       {
      //         transDate: "2038-02-27",
      //         transTime: "00:00:00",
      //         seqNo: "BH20240912161251534632117",
      //         repayTerm: 1,
      //         repayBucketType: "罚息",
      //         repayType: "逾期还款",
      //         repayBucketAmt: 2.49,
      //         termTxnAmt: 3369.21,
      //         termSuccAmt: 3369.21,
      //         payMode: "线上还款",
      //         afterRepayStatus: "本期已还清",
      //         batchDate: "2038-02-27",
      //       },
      //       {
      //         transDate: "2038-02-27",
      //         transTime: "00:00:00",
      //         seqNo: "BH20240912161251534632117",
      //         repayTerm: 1,
      //         repayBucketType: "利息",
      //         repayType: "逾期还款",
      //         repayBucketAmt: 51.67,
      //         termTxnAmt: 3369.21,
      //         termSuccAmt: 3369.21,
      //         payMode: "线上还款",
      //         afterRepayStatus: "本期已还清",
      //         batchDate: "2038-02-27",
      //       },
      //       {
      //         transDate: "2038-02-27",
      //         transTime: "00:00:00",
      //         seqNo: "BH20240912161251534632117",
      //         repayTerm: 1,
      //         repayBucketType: "本金",
      //         repayType: "逾期还款",
      //         repayBucketAmt: 3315.05,
      //         termTxnAmt: 3369.21,
      //         termSuccAmt: 3369.21,
      //         payMode: "线上还款",
      //         afterRepayStatus: "本期已还清",
      //         batchDate: "2038-02-27",
      //       },
      //       {
      //         transDate: "2038-04-02",
      //         transTime: "00:00:00",
      //         seqNo: "BH20241106155304046334681",
      //         repayTerm: 2,
      //         repayBucketType: "罚息",
      //         repayType: "逾期还款",
      //         repayBucketAmt: 0.83,
      //         termTxnAmt: 3367.55,
      //         termSuccAmt: 3367.55,
      //         payMode: "线上还款",
      //         afterRepayStatus: "本期已还清",
      //         batchDate: "2038-04-02",
      //       },
      //       {
      //         transDate: "2038-04-02",
      //         transTime: "00:00:00",
      //         seqNo: "BH20241106155304046334681",
      //         repayTerm: 2,
      //         repayBucketType: "利息",
      //         repayType: "逾期还款",
      //         repayBucketAmt: 31.2,
      //         termTxnAmt: 3367.55,
      //         termSuccAmt: 3367.55,
      //         payMode: "线上还款",
      //         afterRepayStatus: "本期已还清",
      //         batchDate: "2038-04-02",
      //       },
      //       {
      //         transDate: "2038-04-02",
      //         transTime: "00:00:00",
      //         seqNo: "BH20241106155304046334681",
      //         repayTerm: 2,
      //         repayBucketType: "本金",
      //         repayType: "逾期还款",
      //         repayBucketAmt: 3335.52,
      //         termTxnAmt: 3367.55,
      //         termSuccAmt: 3367.55,
      //         payMode: "线上还款",
      //         afterRepayStatus: "本期已还清",
      //         batchDate: "2038-04-02",
      //       },
      //       {
      //         transDate: "2038-04-16",
      //         transTime: "00:00:00",
      //         seqNo: "BH20241106163151327814380",
      //         repayTerm: 3,
      //         repayBucketType: "罚息",
      //         repayType: "逾期还款",
      //         repayBucketAmt: 0.84,
      //         termTxnAmt: 3367.58,
      //         termSuccAmt: 3367.58,
      //         payMode: "线上还款",
      //         afterRepayStatus: "本期已还清",
      //         batchDate: "2038-04-16",
      //       },
      //       {
      //         transDate: "2038-04-16",
      //         transTime: "00:00:00",
      //         seqNo: "BH20241106163151327814380",
      //         repayTerm: 3,
      //         repayBucketType: "利息",
      //         repayType: "逾期还款",
      //         repayBucketAmt: 17.31,
      //         termTxnAmt: 3367.58,
      //         termSuccAmt: 3367.58,
      //         payMode: "线上还款",
      //         afterRepayStatus: "本期已还清",
      //         batchDate: "2038-04-16",
      //       },
      //       {
      //         transDate: "2038-04-16",
      //         transTime: "00:00:00",
      //         seqNo: "BH20241106163151327814380",
      //         repayTerm: 3,
      //         repayBucketType: "本金",
      //         repayType: "逾期还款",
      //         repayBucketAmt: 3349.43,
      //         termTxnAmt: 3367.58,
      //         termSuccAmt: 3367.58,
      //         payMode: "线上还款",
      //         afterRepayStatus: "本期已还清",
      //         batchDate: "2038-04-16",
      //       },
      //     ],
      //     status: "S",
      //     idType: "身份证 ",
      //     idNo: "省份证号",
      //     name: "哈借据",
      //     gender: "男",
      //     mobile: "手机号",
      //     bankCardNbr: "银行卡号",
      //     maritalStatus: "已婚",
      //     educationType: "博士及以上",
      //     loanProdGroup: "THX001",
      //     prodName: "欢喜贷（特欢喜）",
      //     loanCode: "1015-欢喜贷",
      //     dueBillNo: "3801091411557685081928",
      //     contraNbr: "HT2024081400011931",
      //     applyDate: "2024-08-14",
      //     endDate: "2038-04-09",
      //     startDate: "2038-01-09",
      //     fundStatus: "完成(finish)",
      //     clearDate: "2038-04-16",
      //     loanAmt: 10000,
      //     currency: "156",
      //     payMode: "等额本息",
      //     repayCycle: "月",
      //     totalTerms: "3",
      //     curTerm: "3",
      //     stmtDay: "2038-06-09",
      //     graceDaysInterval: "3",
      //     currOverdueTermCnt: 0,
      //     hstOverdueTermCnt: 3,
      //     prinTotal: 10000.0,
      //     prinRepay: 10000.0,
      //     prinBal: 0.0,
      //     intTotal: 100.18,
      //     intRepay: 100.18,
      //     intBal: 0.0,
      //     pnltIntTotal: 4.16,
      //     pnltIntRepay: 4.16,
      //     compensateAmtSum: 0,
      //     compensateCount: 0,
      //     orignContrNbr: "HT2024081400011931",
      //   },
      // ];

      // console.log("模拟数据", this.allData);

      var data = this.allData.contrDetailList;
      // var data = this.allData;

      data.forEach((element) => {
        if (element.isProprietary != 0) {
          element.planInfoList = element.uniRepayPlanInfoList;
          element.repayDetailList = element.uniRepayDetailInfoList;
        }

        this.loanData.push({
          ...element,
        });
      });

      console.log("展示的列表数据=", this.loanData);
    },

    showDetail(row) {
      console.log("双击", row);
      this.showDialog = true;
      //将明细数据全部初始化

      //客户信息
      this.customerInfo = row;
      // this.customerInfo = row.customerInfo;
      //贷款信息
      this.loanInfo = row;
      // this.loanInfo = row.loanInfo;
      //还款计划
      // this.repaymentPlan = row.scheduleInfo;
      this.repaymentPlan = row;
      //还款记录
      // this.repaymentRecord = row.repayDetail;
      this.repaymentRecord = row;
    },

    //选择菜单
    handleSelect(index) {
      // 根据菜单选项展示不同的表格数据
      this.defaultActive = index;
    },
    //关闭菜单
    handleClose() {
      console.log("222");
      this.showDialog = false;
      //初始化index
      this.defaultActive = "1";
      //初始化表单
      this.customerInfo = {};
      this.loanInfo = {};
      this.repaymentPlan = {};
      this.repaymentRecord = {};
    },
  },
};
</script>

<style scoped>
.loanDataDialog ul li {
  float: left !important;
}
</style>